<template>
	<view>
		<view class="refresh">
			<!-- <h3>我断网了</h3> -->
			<view class="network" @tap="onRefresh()">暂无网络，点击刷新，重试。</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store/store.js'
	export default {
		computed: {
			networkState() {
				return this.$store.state?.mutations?.networkSuccess
			}
		},
		data() {
			return {
				networkSuccess: false
			}
		},
		created() {
			// console.log(this.$store.state.mutations.networkSuccess)
			//监听网络状态变化
			this.networkSuccess = this.$store.state.mutations.networkSuccess
		},
		methods: {
			onRefresh() {
				if (this.$store.state.mutations.networkSuccess) {
					uni.showLoading({
						title: '正在检测网络,请稍等。',
						mask: true,
						duration: 30000 // 当然这个时间可根据实用场景进行相关设置
					});

					setTimeout(() => {
						uni.hideLoading();
						uni.navigateBack()
					}, 3000);
				} else {
					uni.showLoading({
						title: '无网络，请检查您的网络设置。',
						mask: true,
						duration: 30000 // 当然这个时间可根据实用场景进行相关设置
					});

					setTimeout(() => {
						uni.hideLoading();
					}, 3000);
				}
			},
		},
	}
</script>

<style scoped lang="less">
	.network {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100vw;
		height: 100vh;
		// background: #F0F8FF;
		background-size: 100% 100%;
		background-attachment: fixed;
		overflow: hidden;
		display: -moz-box;
		/*兼容Firefox*/
		display: -webkit-box;
		/*兼容FSafari、Chrome*/
		-moz-box-align: center;
		/*兼容Firefox*/
		-webkit-box-align: center;
		/*兼容FSafari、Chrome */
		-moz-box-pack: center;
		/*兼容Firefox*/
		-webkit-box-pack: center;
		/*兼容FSafari、Chrome */
		font-size: 23px;
	}
</style>
